<?php
if (!is_array($items)) {
    $items = array();
}
?>
<div class="br" ms-controller="banner">
    <a href="javascript:;" class="btn" ms-click="add">添加一张图片</a>

    <div style="height: 10px;"></div>
    <div class="list">
        <ul id="banner-ctrl-title">
            <li ms-repeat="items" ms-class="{{$first? 'selected':''}}" onclick="toggleBanner($(this))"><a href="javascript:;">图片{{$index+1}}</a></li>
        </ul>
        <ul class="item" id="banner-img-list">
            <li ms-repeat="items" ms-visible="$first" class="banner-item">
                <div style="overflow: hidden">
                    <a href="javascript:;" class="btn" ms-click="$remove" style="margin-left: 10px;display: block;width:30px;float: left">删除</a>
                    <a href="javascript:;" class="btn" ms-click="bannerImgUp($index)" class="btn" style="margin-left: 10px;display: block;width:30px;float: left">后移</a>
                    <a href="javascript:;" class="btn" ms-click="bannerImgDown($index)" class="btn" style="margin-left: 10px;display: block;width:30px;float: left">前移</a>
                </div>
                <img ms-attr-link="{{el.link}}" ms-attr-src="{{el.pic}}" alt="" style="width: 800px;height: 400px;" >
            </li>
        <ul/>
    </div>
</div>
<script>
    function swapArray(arr, index1, index2) {
        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
        return arr;
    }
    var banner = avalon.define({
        $id : 'banner',
        items : [],
        add : function () {
            banner.items.push({
                pic : '/data/upload/shop/common/default_goods_image.gif',
                link : ""
            })
        },
        bannerImgUp: function(index){
            var arr = banner.items.$model;
            if(index+1 < arr.length){
                swapArray(arr, index, index+1);
                banner.items = arr;
            }
        },
        bannerImgDown: function(index){
            var arr = banner.items.$model;
            if(index > 0){
                swapArray(arr, index, index-1);
                banner.items = arr;
            }
        }
    });

    banner.items = <?php echo json_encode($items);?>;

    function toggleBanner(item){
        var index = item.index();
        $("#banner-ctrl-title li").removeClass("selected").eq(index).addClass("selected");
        $("#banner-img-list li").hide().eq(index).show();
    }

    $.getJSON("/shop/templates/<?php echo $config['template_name']?>/images.json", function (json) {
        window.save_json = function () {
            $('tr.name').each(function () {
                var _this = $(this);
                var name = _this.find('td').text().replace("：", "").trim()
                if (json[name]) {
                    if (name == '首页轮播') {
                        var arr = [];
                        $('.br .item img').each(function () {
                            arr.push({
                                pic: this.getAttribute('src'),
                                link: this.getAttribute("link")
                            })
                        });
                        json[name].items = arr;
                    }
                    else if(name == '基本设置'){
                        json[name].items = [
                            {
                                color : $('[name=color]').val(),
                                qq : $('[name=qq]').val(),
                                search : $('[name=_search]').val(),
                                language : $('[name=_language]').val()
                            },
                            {
                                nav : {
                                    pic :  $('[name=nav]').attr('src'),
                                    link :  $('[name=nav]').attr('link')
                                }
                            }
                        ]
                    }
                    else if(name == '中部广告位'){
                        json[name].items = [
                            {
                                pic : $('.mid_pic img').eq(0).attr('src'),
                                link : $('.mid_pic img').eq(0).attr('link'),
                            },
                            {
                                pic : $('.mid_pic img').eq(1).attr('src'),
                                link : $('.mid_pic img').eq(1).attr('link'),
                            },
                            {
                                pic : $('.mid_pic img').eq(2).attr('src'),
                                link : $('.mid_pic img').eq(2).attr('link'),
                            }
                        ]
                    }
                    else if (name == '楼层') {
                        var arr = floors.items.$model;
                        $('.floor section').each(function (index) {
                            if ($(this).hasClass('floor_type4')) {
                                $(this).find('img').each(function (i) {
                                    arr[index]['goods'][i] = {
                                        'pic': $(this).attr('src'),
                                        'link': $(this).attr('link'),
                                        'goods_name': $(this).attr('goods_name'),
                                        'price': $(this).attr('price')
                                    };
                                })
                            } else if ($(this).hasClass('floor_type5')) {
//                                console.log($(this).find(" img ").eq(0).attr('src'));
                                arr[index]['img'] = {
                                    'pic': $(this).find(" img ").eq(0).attr('src'),
                                    'link': $(this).find(" img ").eq(0).attr('link')
                                }
                            } else if ($(this).hasClass('floor_type8')) {
                                $(this).find(" img.type8_style1 ").each(function (i) {
                                    arr[index]['imgs1'][i] = {
                                        'pic': $(this).attr('src'),
                                        'link': $(this).attr('link'),
                                        'goods_name': $(this).attr('goods_name'),
                                        'price': $(this).attr('price'),
                                        "show" : $(this).attr('show'),
                                    };
                                })
                                $(this).find(" img.type8_style2 ").each(function (i) {
                                    var k = i + 1;
                                    arr[index]['img' + k]['pic'] = $(this).attr('src');
                                    arr[index]['img' + k]['link'] = $(this).attr('link');
                                    arr[index]['img' + k]['goods_name'] = $(this).attr('goods_name');
                                    arr[index]['img' + k]['des'] = $(this).attr('des');
                                    arr[index]['img' + k]['price'] = $(this).attr('price');
                                })
                            }else{
                                $(this).find('img').each(function (i) {
                                    var k = i + 1;
                                    arr[index]['img' + k]['pic'] = $(this).attr('src');
                                    arr[index]['img' + k]['link'] = $(this).attr('link');
                                    arr[index]['img' + k]['goods_name'] = $(this).attr('goods_name');
                                    arr[index]['img' + k]['des'] = $(this).attr('des');
                                    arr[index]['img' + k]['price'] = $(this).attr('price');
                                })
                            }

                        });
                        json[name].items = arr
                    }
                    else {
                        json[name].pic = _this.next().find('img[link]').attr('src');
                        json[name].link = _this.next().find("img[link]").attr('link')
                    }
                }

            });
            var index = layer.load();
            $.post("/admin/?act=web_config&op=save_json", json, function () {
                layer.close(index);
                layer.msg("保存成功", function () {
                    location.reload();
                })
            });

        };
    });
</script>
